<template>
<div class="message part full-height page-content">
  <q-table
    :data="tableData" :columns="columns"
    row-key="id" class="scroll myTable-line"
    :loading="tableLoading" table-style="max-height: 708px"
    hide-bottom :pagination="{rowsPerPage: 0}"
    no-data-label="暂无数据">
    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td key="type" :props="props">
          <span class="round" :style="{'background-color':eventColor[props.row.type]}"></span>
          {{ eventExplain[props.row.type] }}
        </q-td>
        <q-td key="device" :props="props">{{ props.row.device }}</q-td>
        <q-td key="time" :props="props">{{ props.row.time }}</q-td>
      </q-tr>
    </template>
  </q-table>
</div>
</template>

<script>
export default {
  name: 'message',
  data () {
    return {
      // 事件列表
      tableLoading: false, // table加载时使用
      tableData: [], // table数据
      columns: [ // 事件标题
        { name: 'type', align: 'left', label: '状态类型', field: 'type', check: true },
        { name: 'device', align: 'left', label: '设备', field: 'device', check: true },
        { name: 'time', align: 'left', label: '发生时间', field: 'time', check: true }
      ],
      // 事件对应颜色
      eventColor: {
        process: '#18D77F', // 加工
        stop: '#FF8559', // 停机
        break: '#999999', // 断开
        offLine: '#666666', // 离线
        alert: '#E43434', // 报警
        changeLine: '#AC70F2', // 换线
        fault: '#F7B82D', // 故障
        repair: '#44D8C6' // 维修
      },
      // 事件名称列表
      eventExplain: {
        process: '加工',
        stop: '停机',
        break: '断开',
        offLine: '离线',
        alert: '报警',
        changeLine: '换线',
        fault: '故障',
        repair: '维修'
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.tableData = [
        {
          type: 'alert',
          device: '设备(123456)',
          time: '2019-12-10 15:50:28'
        },
        {
          type: 'alert',
          device: '设备(123456)',
          time: '2019-12-10 15:50:28'
        }
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
  .round{
    display inline-block
    width 14px
    height 14px
    line-height 14px
    border-radius 7px
    margin-right 10px
  }
</style>
